<!--
 * @Descripttion : 
 * @version      : 
 * @Author       : zero
 * @Date         : 2021-06-04 16:58:22
 * @LastEditors  : zero
 * @LastEditTime : 2021-06-19 16:55:20
-->

<template>
  <div class="getIn">
    <div class="profit">
      <div class="up">
        <span>Mining income</span>
        <div class="rew" @click="extractPoolEarnSelf">Withdrawal</div>
        <el-tooltip
          content="After the betting is settled: If the quiz is unsuccessful, you will lose your principal.  If the quiz is successful, the bet principal will be automatically returned when you withdraw"
          placement="top"
          effect="light"
        >
          <!-- <span class="tip">?</span> -->
          <i class="el-icon-warning tip"></i>
        </el-tooltip>
      </div>
      <div class="down">Betting rewards {{ game.userChips }} CHIPS</div>
      <div class="down">Mining rewards {{ game.userBet }} CHIPS</div>
    </div>

    <div class="reward">
      <div class="item" v-for="(item, index) in list" :key="index" v-cloak>
        <span class="content"
          >You have used {{ $formatNum(item.betNumber) }} CHIPS to bet
          {{ item.betName }} to win
        </span>
        <div
          class="getout"
          v-if="status == 1 && !isEnd"
          @click="getOut(item.betPoolN, item.betNumber)"
        >
          Revoke
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { web3handle, extractPoolEarn } from "@/web3/index";
import moment from 'moment'
export default {
  data () {
    return {
      betlist: []
    };
  },
  props: ["userChips", "userBet", "id", "list", "status", "game", "userNumber"],
  mounted () {
    console.log(this.game)
    console.log(this.list)
  },
  watch: {
    // game: {
    //   handler (news, olds) {
    //     console.log(news, olds)
    //     this.betlist = news.betlist
    //     this.$forceUpdate()
    //   },
    //   deep: true,
    //   immediate: true,
    // }
  },
  computed: {
    isEnd () {
      let endTime = this.endTime
      let newTime = moment.utc().unix()
      if (newTime > endTime) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    //提取奖励
    async extractPoolEarnSelf () {
      // if (this.status != 2) {
      //   this.message("Can't withdraw temporarily", 2)
      //   return
      // }
      if (this.userNumber <= 0) {
        this.message('No rewards available', 2)
        return
      }
      this.loading("Please wait...");
      const handel = await web3handle(extractPoolEarn);
      if (handel) {
        this.loadingOver();
        console.log(this.id)
        const _withdraw = await handel(this.id);
        if (_withdraw) {
          this.message("Withdraw successfully", 1);
          this.$emit("updata")
        }
      }
    },
    getOut (betPoolN, betNumber) {
      if (this.status == 1) {
        console.log(betPoolN)
        this.$store.commit("setBetPoolN", betPoolN);
        console.log(betNumber)
        this.$store.commit("setBetNumber", betNumber);
        //可以投注才可以撤资
        this.$emit("isGetOutDia", this.game);
      }
    },
  },
};
</script>

<style scoped lang='scss'>
[v-cloak] {
  display: none;
}
.getIn {
  width: 1100px;
  background-color: #f3f3f3;
  padding: 30px;
  border-radius: 10px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .reward {
    width: 70%;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .item {
    margin: 5px 0;
    color: #333;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .content {
      flex: 1;
      text-align: left;
      font-weight: 500;
    }
    // .action {

    //   display: flex;
    //   align-items: center;
    // }
    .getout {
      width: 115px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      font-size: 16px;
      background-color: #df393b;
      border-radius: 3px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .profit {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .up {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
      .tip {
        margin-left: 10px;
        color: #aeaeae;
        font-size: 16px;
        cursor: pointer;
      }
      .rew {
        width: 100px;
        height: 26px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        background-color: #2ad84f;
        border-radius: 3px;
        cursor: pointer;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #1ab23a;
      }
    }
    .down {
      font-weight: 600;
      color: #505050;
    }
  }
}
</style>